<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>过滤器-filters，作用是文本格式化，金额、时间、日期、数字的格式化</p>
    <hr>
    <p>名称： {{name}}</p>
    <p>价格： {{price | moneyFormat1(3, '$') | moneyFormat2 | moneyFormat3}}</p>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 全局注册
    // 第一个参数是过滤器的名字
    // 第二个参数是过滤器的内容
    Vue.filter('moneyFormat3', (val)=>{
      console.log(val);
      return val+'整'
    })
    let vm = new Vue({
      el: '#app',
      data: {
        price: 256,
        name: '耳机'
      },
      // 过滤器，抽象为一个公用的工具，方便其他情况使用
      // 1. 注册过滤器（全局注册、局部注册）
      // 2. 通过管道符使用过滤器，可以串联
      filters: {
        // 第一个参数是上一个过滤器处理之后的结果，俄罗斯套娃
        // 第二个及以后的参数，是传入的参数
        moneyFormat1(val, n, type) {
          // n是小数点的位数
          // type是货币的类型
          console.log(val);
          return type+val.toFixed(n)
        },
        moneyFormat2(val) {
          console.log(val);
          return val+'元'
        }
      }
    })
  </script>
</body>
</html>